<script setup>
import { useSetting } from '@/stores/setting'
import { useUser } from '@/stores/user'
window.User = useUser()
window.Setting = useSetting()
// App负责调用获取用户data和用户Setting
User.init(data => {// 查询用户信息
  myMsgS("欢迎你，" + User.name + '！')
  Setting.init()
  // 改变背景图片
  if (Setting.pageSetting.backgroundImage) {
    document.body.style.backgroundImage = 'url(' + Setting.pageSetting.backgroundImage + ")"
  }
})
</script>

<template>
  <router-view></router-view>
</template>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  // transition: 0.1s; //会影响element ui

  /* font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; */
}

html {
  height: 100%;

  body {
    color: var(--font-color);
    transition: 0.1s;
    background-color: var(--body-back-color);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-image: url("https://pic1.zhimg.com/v2-8a4275beeee5d3798a647db30b96e9d8_r.jpg");
    min-height: 100%;
  }
}

a {
  color: var(--font-color);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

/* 去除选中时的外框 */
input:focus {
  outline: none;
}


/* 中间模块通用 */
.model {
  display: block;
  position: relative;

  transition: 0.5s;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 16px;
  overflow: hidden;
  box-sizing: border-box;

  background-color: var(--model-back-color);
  border: var(--model-border);
  box-shadow: var(--model-shadow);
  backdrop-filter: blur(6px);

  &:hover {
    background-color: var(--model-back-color-hover);
    box-shadow: var(--model-shadow-hover);
    //backdrop-filter: blur(10px);
  }
}

/* model里面的二级模块 */
.m-in-model {
  display: block;
  position: relative;

  transition: 0.5s;
  border-radius: 7px;
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;

  background-color: var(--model-back-color);
  border: 1px solid var(--model-border-color);

  &:hover {
    background-color: var(--model-back-color-hover);
  }
}


/* 按钮悬停样式 */
.hoverBottom:hover,
.hover:hover {
  background-color: var(--hoverBottom-color);
  cursor: pointer;
}


/* 滚动条样式 */
/* 
  1、::-webkit-scrollbar 滚动条整体部分，可以设置宽度，颜色啥的
  3、::-webkit-scrollbar-button 滚动条两端的按钮
  4、::-webkit-scrollbar-track 外层轨道
  5、::-webkit-scrollbar-track-piece 内层滚动槽
  6、::-webkit-scrollbar-thumb 滚动的滑块
  7、::-webkit-scrollbar-corner 边角
  8、::-webkit-resizer 定义右下角拖动块的样式 */
*::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

*::-webkit-scrollbar-track-piece {
  border-radius: 10px;
  background-color: var(--scrollbar-color);
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--scrollbar-thumb-color);
}
</style>